<template>
  <el-card>
    <el-form :inline="true" :model="formInline" class="user-search">
      <el-form-item label="">
        <el-input
          size="small"
          v-model="userName"
          placeholder="输入用户名"
        ></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-input
          size="small"
          v-model="userMobile"
          placeholder="输入手机号"
        ></el-input>
      </el-form-item>
      <el-form-item> </el-form-item>
    </el-form>
    <!--列表-->
    <el-table
      size="small"
      @selection-change="selectChange"
      :data="
        hostData.filter(
          (data) =>
            (!userName ||
              data.user.name.toLowerCase().includes(userName.toLowerCase())) &&
            (!userMobile || data.account.mobile.includes(userMobile))
        )
      "
      highlight-current-row
      v-loading="loading"
      :default-sort="{ prop: 'date', order: 'descending' }"
      border
      element-loading-text="拼命加载中"
      style="width: 100%"
    >
      <el-table-column align="center" prop="address" label="住址" width="100">
        <template #default="scope">
          <div>{{ scope.row.host.address }}</div>
        </template>
      </el-table-column>

      <el-table-column align="center" prop="name" label="姓名" width="100">
        <template #default="scope">
          <div>{{ scope.row.user.name }}</div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="sex"
        label="性别"
        min-width="70"
        filter-placement="bottom-end"
        :filters="[
          { text: '女', value: '女' },
          { text: '男', value: '男' },
        ]"
        :filter-method="sexFilter"
      >
        <template #default="scope">
          <div>{{ scope.row.user.sex }}</div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="mobile"
        label="手机号码"
        min-width="100"
      >
        <template #default="scope">
          <div>{{ scope.row.account.mobile }}</div>
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        prop="state"
        label="状态"
        min-width="100"
        filter-placement="bottom-end"
        :filters="[
          { text: '未处理', value: 0 },
          { text: '已拒绝', value: 2 },
        ]"
        :filter-method="stateFilter"
      >
        <template #default="scope">
          <el-tag v-if="scope.row.host.state == 0" type="waning">未处理</el-tag>
          <el-tag v-if="scope.row.host.state == 2" type="info">已拒绝</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        sortable
        prop="date"
        label="创建时间"
        min-width="150"
      >
        <template #default="scope">
          <div>{{ scope.row.user.date_time }}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="250" align="center">
        <template #default="scope">
          <el-popover
            placement="top"
            :width="160"
            trigger="hover"
            v-model:visible="visible[scope.$index]"
            align="center"
          >
            <div style="text-align: right; margin: 0; width: 160px">
              <el-image
                :src="imgPath + '/' + scope.row.account.mobile"
                class="image"
              ></el-image>
              <el-button
                size="mini"
                type="text"
                @click="visible[scope.$index] = false"
                >关闭</el-button
              >
              <el-button
                type="primary"
                size="mini"
                @click="pass(scope.$index, scope.row)"
                >通过</el-button
              >
            </div>
            <template #reference>
              <el-button
                size="mini"
                type="info"
                @click="hostImg(scope.$index, scope.row)"
                >查看</el-button
              >
              <!-- <el-button @click="">删除</el-button> -->
            </template>
          </el-popover>
          <el-button size="mini" @click="pass(scope.$index, scope.row)"
            >通过</el-button
          >

          <el-button
            size="mini"
            type="danger"
            @click="reject(scope.$index, scope.row)"
            >拒绝</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 编辑界面 -->
  </el-card>
  <div>
    <!-- 搜索筛选 -->

    <el-dialog
      :title="title"
      v-model="suggestFormVisible"
      width="30%"
      @click="closeDialog('edit')"
    >
      <el-form label-width="0" ref="editForm" :model="editForm" :rules="rules">
        <el-form-item prop="suggest">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入处理意见"
            v-model="editForm.suggest"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div class="dialog-footer" align="center">
        <el-button size="small" @click="closeDialog('edit')">取消</el-button>
        <el-button
          size="small"
          type="primary"
          :loading="loading"
          class="title"
          @click="submitForm('editForm')"
          >提交</el-button
        >
      </div>
    </el-dialog>
    <!-- 数据权限 -->
  </div>
</template>

<script>
import { getHost, changeHost } from "@/network/host";

export default {
  name: "AdminManageHost",
  data() {
    return {
      imgPath: "/api/host/getimg",
      visible: [],
      isChange: true,
      loading: false, //是显示加载
      title: "处理意见",
      suggestFormVisible: false, //控制编辑页面显示与隐藏
      // 编辑与添加
      editForm: {
        suggest: "",
        state: 0,
        id: 0,
      },
      // rules表单验证
      rules: {
        suggest: [
          { required: true, message: "请输入合理意见", trigger: "blur" },
        ],
      },
      // 请求数据参数
      formInline: {},
      row: {},
      //用户数据
      hostData: [],
      userName: "",
      userMobile: "",
    };
  },
  created() {
    this.getHostData();
  },
  methods: {
    getHostData() {
      this.loading = true;
      getHost().then(
        (res) => {
          if (res.code == 200) {
            this.hostData = res.data;
          } else {
            this.$message.error(res.data);
          }
        },
        (err) => {
          this.$message.error("请求失败");
        }
      );
      this.loading = false;
    },
    reject(index, row) {
      this.editForm.id = row.id;
      this.row = row;
      this.editForm.state = 2;
      this.suggestFormVisible = true;
    },
    change() {
      this.loading = true;

      changeHost(this.editForm).then(
        (res) => {
          if (res.code == 200) {
            this.row.host.state = 2;
            this.$message.success("处理成功");
          } else {
            this.$message.error("失败");
          }
          this.suggestFormVisible = false;
        },
        (err) => {}
      );
      this.loading = false;
      this.getHostData();
    },
    submitForm() {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          this.change();
        }
      });
    },
    pass(index, row) {
      this.editForm.id = row.id;
      this.editForm.state = 1;
      this.change();
      this.getHostData();
    },
    hostImg(index, row) {
      this.visible[index] = true;
    },
    sexFilter(value, row) {
      return row.user.sex === value;
    },
    stateFilter(value, row) {
      return row.host.state === value;
    },
  },
};
</script>

<style scoped>
image {
  width: 100%;
  height: 100%;
}
</style>